@extends('layouts.app')


@section('title','register')


@section('content')

    {{--echarts--}}
    <script src="{{ asset("js/echarts.min.js") }}"></script>

    <div class="landscape-view">


    <div class="hd">
        <h1 class="page_title">账户资金曲线</h1>

        <div class="weui_cell">
            <div class="weui_cell_hd"><label for="" class="weui_label_long">交易日期</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="month" value="">

            </div>
            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">查询</a>

        </div>

        <div class="clear-fix"></div>

    </div>

        <div class="bd">

            <div class="weui_tab">
                <div class="weui_navbar">
                    <a href="#tab-ratio" class="weui_navbar_item weui_bar_item_on">
                        盈亏比例
                    </a>
                    <a href="#tab-chart" class="weui_navbar_item">
                        资金曲线
                    </a>

                </div>

                <div class="weui_tab_bd">
                    <div id="tab-ratio" class="weui_tab_bd_item weui_tab_bd_item_active">

                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="main" style="width: 100%;height:400px;left:center"></div>
                        <script type="text/javascript">
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main'));

                            // 指定图表的配置项和数据
                            var option = {
                                title: {
                                    text: '2016年3月盈亏比例',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'axis'

                                },
                                xAxis: {
                                    type: 'category',
                                    name: '日期',
                                    max:'dataMax',

                                    data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                yAxis: {
                                    type: 'value',
                                    name: '盈亏比例(%)',
                                    max: '20',
                                    data: [1, 2, 4, 8, 16, 6, 1, 0, 15]
                                },
                                series: [

                                    {
                                        name: '盈亏比例(%)',
                                        type: 'line',
                                        data: [1, 2, 4, 8, 16, 6, 1, 0, 15]
                                    }

                                ]
                            };


                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        </script>


                    </div>

                    <div id="tab-chart" class="weui_tab_bd_item">
                        <p>资金曲线</p>
                    </div>

                </div>

            </div>
        </div>



    </div>

{{--设置屏幕横屏显示--}}
<script src="{{ asset("js/set-screen-landscape.js") }}"></script>


@endsection